import React, { useState, useEffect } from 'react';
import { Input, Button, Table, Drawer, Form, Tree, message } from 'antd';
import {
  getStype,
  addtype,
  deletetype,
  changetype,
} from '../../apis/servicetype/servicetype';
export default function servicetype() {
  const [Stypydata, setStypeDate] = useState();
  const [visible, setVisible] = useState(false);
  const [xgvisible, setXgvisible] = useState(false);
  const [pid, setPid] = useState();
  const [xgdata, setXgdata] = useState();
  const [parentId, setParentId] = useState();
  const columns = [
    {
      title: '名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '操作',
      render: (tags) => (
        <>
          <Button
            onClick={() => changegoods(tags)}
            style={{ marginRight: '20px' }}
          >
            修改
          </Button>
          <Button onClick={() => deletegoods(tags)}>删除</Button>
        </>
      ),
    },
  ];
  const addgood = () => {
    setVisible(true);
  };
  const onClose = () => {
    setVisible(false);
  };
  const xgonClose = () => {
    setXgvisible(false);
  };
  const deletegoods = async (tags) => {
    const res = await deletetype({ id: tags.id });
    if (res.status == 200) {
      message.success('删除成功');
    } else {
      message.success('删除失败');
    }
  };
  useEffect(() => {
    getData();
  }, []);
  const getData = async () => {
    const res = await getStype();
    console.log('111', res.data.rows.children);
    setStypeDate(res.data.rows.children);
  };
  const onCheck = (values) => {
    console.log(values);
    setPid(values[0]);
  };
  const xgonCheck = (values) => {
    setParentId(values[0]);
  };
  const onFinish = async (values) => {
    const res = await addtype({ ...values, pid });
    console.log(res);
    if (res.status == 200) {
      message.success('添加成功');
    } else {
      message.success('添加失败');
    }
    setVisible(false);
  };
  //修改
  const changegoods = (tags) => {
    setXgvisible(true);
    console.log(tags);
    setXgdata(tags);
  };
  const xgonFinish = async (values) => {
    const res = await changetype({ ...values, id: xgdata.id, parentId });
    if (res.status == 200) {
      message.success('添加成功');
    } else {
      message.success('添加失败');
    }
  };
  return (
    <div>
      <div style={{ width: '1650px', height: '50px' }}>
        名称：&nbsp;&nbsp;&nbsp;
        <Input style={{ width: '200px', marginRight: '1120px' }}></Input>
        <Button
          style={{
            marginRight: '20px',
            backgroundColor: '#1890ff',
            color: 'white',
          }}
        >
          查询
        </Button>
        <Button>重置</Button>
      </div>
      <div style={{ width: '1650px', height: '50px' }}>
        <Button
          style={{
            border: '1px solid #1890ff',
            color: '#1890ff',
            marginRight: '20px',
          }}
          onClick={addgood}
        >
          新增
        </Button>
        <Button>删除</Button>
      </div>
      <div style={{ width: '1650px' }}>
        <Table
          columns={columns}
          dataSource={Stypydata}
          pagination={{
            defaultCurrent: 1,
            defaultPageSize: 7,
            pageSizeOptions: [5, 7, 10],
            showSizeChanger: true,
          }}
        />
      </div>
      <Drawer
        title="新增部门"
        placement="right"
        visible={visible}
        onClose={onClose}
      >
        <Form
          name="control-hooks"
          labelCol={{
            span: 6,
          }}
          wrapperCol={{
            span: 12,
          }}
          layout="horizontal"
          onFinish={onFinish}
        >
          <Form.Item label="部门名称" name="name">
            <Input />
          </Form.Item>
          <Form.Item label="上级部门">
            <Tree
              //   style={{ marginLeft: '100px' }}
              checkable
              onCheck={onCheck}
              treeData={Stypydata}
            />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
      <Drawer
        title="修改按钮"
        placement="right"
        visible={xgvisible}
        onClose={xgonClose}
      >
        <Form
          name="control-hooks"
          labelCol={{
            span: 6,
          }}
          wrapperCol={{
            span: 12,
          }}
          layout="horizontal"
          onFinish={xgonFinish}
        >
          <Form.Item label="服务名称" name="name">
            <Input.TextArea defaultValue={xgdata != null ? xgdata.text : ''} />
          </Form.Item>
          <Form.Item label="上级类型">
            <Tree
              //   style={{ marginLeft: '100px' }}
              checkable
              onCheck={xgonCheck}
              treeData={Stypydata}
            />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
    </div>
  );
}
